<script setup lang="ts">
defineOptions({
  name: "sopCheckList"
});
import { ref, onMounted } from "vue";
import { queryGasChecklist } from "@/api/modules/operation";
import checkList from "@/views/gas/operation/bottleManage/replaceBottle/components/checkList.vue";

interface Props {
  // taskType 任务类型 (1-气瓶,2-酸桶,3-槽车充填)
  params: { templateId: string; taskType: number };
}

const props = withDefaults(defineProps<Props>(), {
  params: () => ({
    templateId: "",
    taskType: 1
  })
});

const dialogTableVisible = defineModel({ type: Boolean, default: false });
const checkListCollapseValue = ref<string>("");
const checkListDataList = ref<Array<Record<string, any>>>([]);
const loading = ref<boolean>(false);

const cancelHandler = () => {
  dialogTableVisible.value = false;
};

const init = async () => {
  const { params } = props;
  loading.value = true;
  const res = await queryGasChecklist(params, () => {
    loading.value = false;
  });
  const ar = res.map(item => {
    const { contentList, title } = item;
    const id = "";
    const contentId = "";
    const status = "";
    const result = "";
    const remark = "";
    const data = contentList.map(content => ({ id, contentId, content, status, result, remark }));
    return { title, data };
  });
  checkListDataList.value.push(...ar);
  checkListCollapseValue.value = ar[0]?.title;
  loading.value = false;
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <px-dialog v-model="dialogTableVisible" title="查看CheckList" :width="1200">
    <div v-loading="loading" class="sop-check-list">
      <checkList ref="checkListRef" v-model="checkListCollapseValue" disabled onlyList :data="checkListDataList" @toUpdate="cancelHandler" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button type="primary" @click="cancelHandler">关闭</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<style lang="scss" scoped>
.sop-check-list {
  height: 480px;
}
</style>
